import React, { Component } from 'react';
import { Container, Header,View, Content, List, ListItem, Text, Thumbnail,Icon,Title, Left, Body, Right, Switch,Button } from 'native-base';
import * as Animatable from 'react-native-animatable';
const Dimensions = require("Dimensions");
const { width,height } = Dimensions.get("window");
export default class ListIconExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    const uri = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554652779510&di=484961aa7b91c6faefe8a94e8760689b&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fuploads%2F2018-12-14%2F110256340.jpg";
    return (
      <Container>
         <Header 
         style={{backgroundColor:'#00cec9',height:100}}
         androidStatusBarColor='#00cec9'
         span
         >
          <Left>
            <Button transparent  onPress={() => this.props.navigation.goBack()}>
              <Icon name='md-arrow-round-back' style={{fontSize: 30, color: '#fff'}} />
            </Button>
          </Left>
          <Body style={{flexDirection:'row',marginLeft:40,marginBottom:-20}}>
          {/* <Title>内蒙古工业大学</Title> */}
          {/* <Title>asdsd</Title> */}
          </Body>
          <Right>
           
            <Button transparent>
              <Icon name='ios-help-circle' style={{fontSize: 30, color: '#fff'}} />
            </Button>
          </Right>
        </Header>
        <View style={{marginTop:-35,marginLeft: 25,}}>
        {/* <Animatable.View animation="bounceIn" easing="ease-in-circ" iterationCount="" style={{ textAlign: 'center' }}> */}
        
        <Thumbnail rounded large source={{uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554920259134&di=24c72fbdd5f2e720df5eabfadb11ff14&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F19%2F20150919161113_sPjdT.jpeg'}} />
        
        {/* </Animatable.View> */}
        </View>
        <Content padder>
        <List disableRightSwipe={true}>
          
        {/* <ListItem itemHeader first>
            </ListItem> */}
            <ListItem icon>
            <Left>
              <Button style={{ backgroundColor: "#8395a7" }}>
                <Icon active name="ios-qr-scanner" />
              </Button>
            </Left>
            <Body>
              <Text style={{color:"#57606f"}}>绑定设备</Text>
            </Body>
            <Right>
              <Switch value={true} />
            </Right>
          </ListItem>
          <ListItem itemHeader first>
            </ListItem>
        <ListItem icon>
            <Left>
              <Button style={{ backgroundColor: "#ffa502" }}>
                <Icon active name="ios-notifications" />
              </Button>
            </Left>
            <Body>
              <Text style={{color:"#57606f"}}>开启通知</Text>
            </Body>
            <Right>
              <Switch value={false} />
            </Right>
          </ListItem>
          <ListItem icon>
            <Left>
              <Button style={{ backgroundColor: "#10ac84" }}>
                <Icon active name="ios-person-add" />
              </Button>
            </Left>
            <Body>
              <Text>人员管理</Text>
            </Body>
            <Right>
              <Icon active name="arrow-forward" />
            </Right>
          </ListItem>
      
        
          <ListItem icon>
            <Left>
              <Button style={{ backgroundColor: "#ee5253" }}>
                <Icon active name="ios-stats" />
              </Button>
            </Left>
            <Body>
              <Text>数据统计</Text>
            </Body>
            <Right>
              <Icon active name="arrow-forward" />
            </Right>
          </ListItem>
        </List>
        <List>
        <ListItem itemHeader first>
              {/* <Text>其他</Text> */}
            </ListItem>
        <ListItem icon>
            <Left>
              <Button style={{ backgroundColor: "#0abde3" }}>
                <Icon active name="ios-globe" />
              </Button>
            </Left>
            <Body>
              <Text>关于我们</Text>
            </Body>
            <Right>
              <Icon active name="arrow-forward" />

            </Right>
          </ListItem>
          <ListItem icon>
            <Left>
              <Button style={{ backgroundColor: "#2f3542" }}>
                <Icon active name="ios-call" />
              </Button>
            </Left>
            <Body>
              <Text>联系我们</Text>
            </Body>
            <Right>
              <Text>27364832</Text>
              <Icon active name="ios-call" />
            </Right>
          </ListItem>
      
       
        </List>
        <View style={{height:50,width:width}}></View>
        <Animatable.View animation="bounceIn" direction="normal">
        <Button block rounded style={{backgroundColor:'#00cec9'}} onPress={() => this.props.navigation.navigate('Login')}>
            <Text>退出登录</Text>
          </Button>
        </Animatable.View>

          
        </Content>
      </Container>
    );
  }
}